import React from 'react';
import {
  View,
  Image,
  StyleSheet,
  FlatList,
  TouchableOpacity,
  Text,
} from 'react-native';
import Badge from './common/Badge';
import {
  COLORS,
  RADIUS,
  FONT_SIZE,
  FONT_WEIGHT,
  SPACING,
} from '../styles/constants';

/**
 * HorizontalImageScroll 简洁横向图片列表
 * - 默认卡片宽高：130 x 90，可按需调整
 * - props: items [{id,image,title}], onPress(item)
 */
export default function HorizontalImageScroll({ items = [], onPress }) {
  return (
    <View style={styles.container}>
      <FlatList
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={styles.list}
        data={items}
        keyExtractor={(it, idx) => it.id || String(idx)}
        renderItem={({ item }) => {
          const distance = item.raw?.distance || item.distance;
          const level = item.raw?.level || item.level;
          return (
            <TouchableOpacity
              style={styles.card}
              onPress={() => onPress?.(item)}
            >
              <View style={styles.imageWrapper}>
                <Image source={{ uri: item.image }} style={styles.img} />
                {level && (
                  <Badge
                    text={level}
                    type="level"
                    size="sm"
                    style={styles.topLeftBadge}
                  />
                )}
                {distance && (
                  <Badge
                    text={distance}
                    type="distance"
                    size="sm"
                    style={styles.topRightBadge}
                  />
                )}
              </View>
              {item.title && (
                <View style={styles.captionBar}>
                  <Text numberOfLines={1} style={styles.caption}>
                    {item.title}
                  </Text>
                </View>
              )}
            </TouchableOpacity>
          );
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginHorizontal: SPACING.lg,
    backgroundColor: COLORS.transparent,
    borderRadius: RADIUS.md,
  },
  list: { paddingLeft: 0, paddingRight: SPACING.lg },
  card: {
    width: 150,
    marginRight: SPACING.lg,
    backgroundColor: COLORS.transparent,
    borderRadius: RADIUS.md,
    padding: 0,
  },
  imageWrapper: {
    position: 'relative',
  },
  img: {
    width: '100%',
    height: 190,
    borderTopLeftRadius: RADIUS.md,
    borderTopRightRadius: RADIUS.md,
    borderBottomLeftRadius: 0,
    borderBottomRightRadius: 0,
    backgroundColor: COLORS.background.secondary,
  },
  topLeftBadge: {
    position: 'absolute',
    top: SPACING.sm,
    left: SPACING.sm,
  },
  topRightBadge: {
    position: 'absolute',
    top: SPACING.sm,
    right: SPACING.sm,
  },
  captionBar: {
    width: '100%',
    backgroundColor: COLORS.white,
    borderBottomLeftRadius: RADIUS.md,
    borderBottomRightRadius: RADIUS.md,
    paddingVertical: 10,
    paddingHorizontal: 10,
  },
  caption: {
    fontSize: FONT_SIZE.md,
    color: COLORS.text.secondary,
    textAlign: 'center',
    fontWeight: FONT_WEIGHT.semibold,
  },
});
